<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .content {
            width: 1024px;
            margin: 0 auto;
        }

        .banner {
            /* overflow: hidden; */
            position: relative;
            width: 1024px;
            height: 500px;
        }

        .banner .item {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: all 500ms ease-in-out;
        }

        .banner .active {
            opacity: 1;
        }

        .banner .item img {
            width: 100%;
            height: 100%;
            flex-shrink: 0;
        }

        .btn {
            width: 405px;
        }

        .btn button {
            width: 200px;
            color: black;
            z-index: 5;
        }

        .indicator {
            position: absolute;
            bottom: 20px;
            display: flex;
            justify-content: center;
            width: 100%;
            height: 10px;
            z-index: 999;
        }

        .indicator .itemr {
            width: 8px;
            height: 8px;
            margin: 0 10px;
            border-radius: 50%;
            background-color: #aaa;
        }

        .indicator .activer {
            background-color: #333;
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="banner">
            <div class="item active">
                <img src="./image/01.jpeg" alt="">
            </div>
            <div class="item">
                <img src="./image/02.webp" alt="">
            </div>
            <div class="item">
                <img src="./image/03.webp" alt="">
            </div>
            <div class="item">
                <img src="./image/04.webp" alt="">
            </div>
            <div class="item">
                <img src="./image/05.webp" alt="">
            </div>
            <div class="indicator">

            </div>
        </div>
        <div class="btn">
            <button class="pre">上一页</button>
            <button class="next">下一页</button>
        </div>
    </div>

    <script>
        const banner = document.querySelector('.banner');
        const next = document.querySelector('.next');
        const pre = document.querySelector('.pre');
        const indicator = document.querySelector('.indicator');
        const btn = document.querySelector('.btn');
        let activeIndex = 0;
        let preindex = 0
        let maxIndex = banner.children.length - 2;
        let timer = null

        // 动态的创建指示器
        for (let i = 0; i < banner.children.length - 1; i++) {
            let span = document.createElement('span')
            span.classList.add('itemr')
            if (i === 0) {
                span.classList.add('activer')
            }
            indicator.append(span)
        }

        function nextFn() { // 下一张的函数
            preindex = activeIndex
            activeIndex++
            if (activeIndex > maxIndex) {
                activeIndex = 0;
            }
            banner.children[activeIndex].classList.add('active');
            banner.children[preindex].classList.remove('active');

            // 改变指示器
            indicator.children[preindex].classList.remove('activer')
            indicator.children[activeIndex].classList.add('activer')

        }
        next.addEventListener('click', nextFn) // 点击下一张
        pre.addEventListener('click', () => { // 点击上一张
            preindex = activeIndex
            activeIndex--
            if (activeIndex < 0) {
                activeIndex = maxIndex;
            }
            banner.children[activeIndex].classList.add('active');
            banner.children[preindex].classList.remove('active');

            // 改变指示器
            indicator.children[preindex].classList.remove('activer')
            indicator.children[activeIndex].classList.add('activer')
        })

        // 自动轮播
        autoPlay()
        function autoPlay() {
            timer = setInterval(nextFn, 3000)
        }

        // 清除自动轮播的定时器
        function clearAutoplay() {
            if (timer) {
                clearInterval(timer)
                timer = null
            }
        }
        // 开启定时器
        function startAutoplay() {
            if (!timer) {
                timer = setInterval(nextFn, 3000)
            }
        }

        // 暂定自动轮播
        banner.addEventListener('mouseover', () => { // 鼠标进入暂停自动轮播
            clearAutoplay()
        })
        banner.addEventListener('mouseout', () => { // 鼠标离开开始自动轮播
            startAutoplay()
        })
        btn.addEventListener('mouseover', () => { // 鼠标进入暂停自动轮播
            clearInterval(timer)
        })
        btn.addEventListener('mouseout', () => { // 鼠标离开开始自动轮播
            autoPlay()
        })
    </script>
</body>

</html>